<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- jQuery的支持 -->
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script>
        // 这个函数是用来做商户提交自己的入驻信息的
        function subData() {

            // 获取到用户在表单中填写的信息
            var mname = document.getElementById("inputMName").value;
            var mpassword = document.getElementById("inputPassword").value;
            var mcontact = document.getElementById("inputMContact").value;
            var mphone = document.getElementById("inputMphone").value;
            var memail = document.getElementById("inputMemail").value;
            var maddr = document.getElementById("inputMAddr").value;
            var mtype = document.getElementById("merchantType").value;
            var mrealname = document.getElementById("inputMRealName").value;
            var midcard =document.getElementById("inputMidCard").value;

            // 将上面的数据组装成一个JSON对象
            if (mname == "" || mpassword == "" || mcontact == "" || memail == "" || mphone == "" || maddr == "" || mtype == "" || mrealname == "" || midcard == ""){
                document.getElementById("spanwarn").innerHTML = "请完善信息";
                return;

            }

            if (midcard.length != 18){
                document.getElementById("spanwarn").innerHTML = "请输入正确的证件号";
                return;
            }
            // alert(4)
            if (mphone.length != 11){
                document.getElementById("spanwarn").innerHTML = "请输入正确的电话号码";
                return;
            }
            // alert(5)
            var data = {
                "mname":mname,
                "mpassword":mpassword,
                "mcontact":mcontact,
                "mphone":mphone,
                "memail":memail,
                "maddress":maddr,
                "merchantType":mtype,
                "mrealname":mrealname,
                "midcard":midcard
            }
            console.log("前端的数据是:",data);
            $.ajax({
                url: 'merchant/update', // 前端给后端提交数据的地址
                type: 'POST', // 请求的方式，默认是GET
                data: JSON.stringify(data), // 前端给后端发送的数据，默认是字符串，可以自己设置成JSON对象
                dataType: 'text', // 后端返回的数据类型，默认是text，可以设置为json
                contentType: 'application/json;charset=utf-8', // 给服务器端发送的数据类型
                success: function (data) {
                    // data是后端返回的数据，在这里可以做页面跳转，或者提示信息
                    console.log("后端返回的数据是:",data);
                    alert("申请成功,请等待审核");
                }

            });
            // 发送请求到服务器端，完成用户的注册
        }

    </script>
</head>
<body>
<span id="spanwarn" style="color: red "></span>
<form class="form-horizontal">
    <div class="form-group">
        <label for="inputMName" class="col-sm-2 control-label">商家名称</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="inputMName" placeholder="请输入商家名称">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">商家密码</label>
        <div class="col-sm-6">
            <input type="password" class="form-control" id="inputPassword" placeholder="请输入商家密码">
        </div>
    </div>
    <div class="form-group">
        <label for="inputMContact" class="col-sm-2 control-label">商家联系人</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="inputMContact" placeholder="请输入商家联系人">
        </div>
    </div>
    <div class="form-group">
        <label for="inputMphone" class="col-sm-2 control-label">商家联系人电话</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="inputMphone" placeholder="请输入商家联系人电话">
        </div>
    </div>
    <div class="form-group">
        <label for="inputMemail" class="col-sm-2 control-label">商家邮箱</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="inputMemail" placeholder="请输入商家邮箱,用于激活账号">
        </div>
    </div>
    <div class="form-group">
        <label for="inputMAddr" class="col-sm-2 control-label">商家地址</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="inputMAddr" placeholder="请输入商家地址">
        </div>
    </div>
    <div class="form-group">
        <label for="inputMAddr" class="col-sm-2 control-label">商家类型</label>
        <div class="col-sm-6">
            <select name="merchantType" class="form-control" id="merchantType">
                <option value="1">个人</option>
                <option value="2">企业</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="inputMRealName" class="col-sm-2 control-label">商家真实名称</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="inputMRealName" placeholder="请输入商家真实名称">
        </div>
    </div>
    <div class="form-group">
        <label for="inputMidCard" class="col-sm-2 control-label">商家证件号</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="inputMidCard" placeholder="请输入商家商家证件号">
        </div>
    </div>
    <div class="form-group">
        <label for="inputMidCard" class="col-sm-2 control-label">商家证件</label>
        <div class="col-sm-6">
            <input type="file"/>
            <img src="./img/image.png" width="100px"/>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">

        </div>
    </div>
</form>
<button class="btn btn-success" onclick="subData()" id="subBtn">提交</button>
<button type="reset" class="btn btn-warning">取消</button>
</body>
</html>